import React, { Component } from 'react';
class Component008 extends Component {
    constructor() {
        super();
        
        // this.state = {
        //     val2: this.props.val
        // }
    }
    click(){
        
    }
    render() {
        let {name, age} = this.props;
        return (
            <div>
                <h3 onClick={fn3.bind(this)}> my mane is Component008</h3>
                <h4 onClick={this.props.xxoo.bind(this)}> my mane is Component008(props.xxoo) {name} <em>{age}</em></h4>
                <hr />
                <strong onClick={click}>{this.props.val}</strong>
            </div>
        );
    }
}

class Component007 extends Component {
    constructor() {
        super();
        this.state = {
            val: "008"
        }
    }
    fn1() {/*方法1*/
        console.log(111, this)
    }
    change(event) {
        var value = this.refs.xxname.value;
        this.setState({
            val:value.toUpperCase()
        });
    }
    render() {
        var fn2 = function () {/*方法2*/
            console.log(222, this)
        };
        return (
            <div>
                <h3 onClick={fn3.bind(this)}> my mane is 007</h3>
                <hr />
                <h3 onClick={this.fn1.bind(this)}> my mane is fn1</h3>
                <hr />
                <h3 onClick={fn2.bind(this)}> my mane is fn2</h3>
                <hr />
                <input type="txt" onChange={this.change.bind(this)} ref="xxname" value={this.state.val}/>
                <Component008 xxoo={this.fn1} name="xo" age="18" val={this.state.val} />
            </div>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div className="">
                {/*在这里写注释*/}
                <Component007 />
                <hr />
            </div>
        );
    }
}

var fn3 = function () {/*方法3*/
    console.log(333, this)
}

export default App;